<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <title></title> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="/screen/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 Element Plus 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
		<link rel="stylesheet" href="/screen/css/industryResources.css">
		<!-- 引入 Vue 3 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 引入 Element Plus -->
		<script src="https://unpkg.com/element-plus"></script>
		<script src="/screen/js/echarts.min.js"></script>
		<script src="/screen/js/echarts-gl.min.js"></script>
		<script type="module" crossorigin src="/screen/assets/index-Dzaf6KOz.js"></script>
		<link rel="stylesheet" crossorigin href="/screen/assets/index-uNLFVScf.css">
	</head>
	<body>
		<div class="main" id="industryResources">
			<div class="industryResourcesContainer" v-cloak>
				<!-- 头部 -->
				<div class="header">
					<div class="leftH">
						<div class="goback" @click="goback"><span>返回</span></div>
						{{yearMonth}} {{hoursMin}}
					</div>
					<span class="text">产业资源一张图</span>
					<div class="rightH">{{weatherNow.condition}} 最高日落：{{weatherNow.tempDay}}℃   最低日落：{{weatherNow.tempNight}}℃</div>
				</div>
				<!-- 内容开始 -->
				<div class="colorfulContent">
					<!-- 左边的 -->
					<div class="lectContent">
						<div class="leftItem">
							<div class="titleComm"><span>大棚信息</span></div>
							<div class="greenhouse commbg">
								<img :src="baseInfo.image" alt="" class="img" />
								<div class="greeninfo">
									<div class="greenitem">
										<img src="/screen/assets/images/industryResources/IN1.png" alt="" class="imimg" />
										大棚名称：{{baseInfo.name}}
									</div>
									<div class="greenitem">
										<img src="/screen/assets/images/industryResources/IN2.png" alt="" class="imimg" />
										基地名称：{{baseInfo.base_name}}
									</div>
									<div class="greenitem">
										<img src="/screen/assets/images/industryResources/IN3.png" alt="" class="imimg" />
										作物名称：{{baseInfo.product_name}}
									</div>
									<div class="greenitem">
										<img src="/screen/assets/images/industryResources/IN4.png" alt="" class="imimg" />
										种植面积：{{baseInfo.area}}亩
									</div>
									<div class="greenitem">
										<img src="/screen/assets/images/industryResources/IN5.png" alt="" class="imimg" />
										负责人：{{baseInfo.manager_name}}
									</div>
									<div class="greenitem">
										<img src="/screen/assets/images/industryResources/IN6.png" alt="" class="imimg" />
										联系方式：{{baseInfo.manager_mobile}}
									</div>
									<div class="greenitem" style="width: 100%;" v-if="baseInfo.pesticide_check_info">
										<img src="/screen/assets/images/industryResources/IN7.png" alt="" class="imimg" />
										农残检测：{{baseInfo.pesticide_check_info.status_name}} {{baseInfo.pesticide_check_info.date}}
									</div>
									<div class="greenitem" style="width: 100%;" v-if="baseInfo.soil_check_info">
										<img src="/screen/assets/images/industryResources/IN8.png" alt="" class="imimg" />
										土壤检测：{{baseInfo.soil_check_info.status_name}} {{baseInfo.soil_check_info.date}}
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem" style="margin: 1.4vh 0;height: 0;flex:auto">
							<div class="titleComm"><span>生长周期</span></div>
							<div class="szWrppaer commtop">
								<div style="height: 100%;">
									<div
									  :class="[growthInfo.currentDay == item?'active':'','szitem']"
									  v-for="(item,index) in growthInfo.growthDays" 
									  :key="index"
									>
										<span v-if="growthInfo.currentDay == item">当前生长周期</span>
										<span v-else>{{item}}天</span>
									</div>
								</div>
								<div class="szright">
									<div style="position: relative;" :style="{ height: growthInfo.num*16 + 'px' }">
										<div
										  class="szritem" 
										  v-for="(item,index) in recordsData" 
										  :key="index"
										  :style="{ bottom: ((item.growth_day - 1)*16) + 'px' }"
										  @click="gocoloful(item)"
										>
										<div 
										  class="szritemline"
										  v-if="item.lineflag = '1'"
										  :style="{ height: item.linenum*16 + 'px' }"
										></div>
										<div class="szrcon">{{item.period_name}} {{item.complete_date}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 中间的内容 -->
					<div class="centerContent">
						<div class="centerConM">
							
						</div>
						<div class="centerbb">
							<div style="width: 49.2%;">
								<div class="titleComm">
									<span>环境数据</span>
								</div>
								<div class="commbg">
									<div class="yibwrapper">
										<div class="yibItem">
											<div class="yibtit">空气温度</div>
											<div class="lcCon">
												{{weatherInfo.Temp}}
												<span class="unit">℃</span>
											</div>
										</div>
										<div class="yibItem">
											<div class="yibtit">空气湿度</div>
											<div class="lcCon">
												{{weatherInfo.Humi}}
												<span class="unit">%</span>
											</div>
										</div>
										<div class="yibItem">
											<div class="yibtit">光照强度</div>
											<div class="lcCon">
												{{weatherInfo.LUX}}
												<span class="unit">Lux</span>
											</div>
										</div>
									</div>
									<div class="yibwrapper">
										<div class="yibItem">
											<div class="yibtit">土壤温度</div>
											<div class="lcCon">
												{{weatherInfo.soil_temp}}
												<span class="unit">%</span>
											</div>
										</div>
										<div class="yibItem">
											<div class="yibtit">土壤湿度</div>
											<div class="lcCon">
												{{weatherInfo.soil_humi}}
												<span class="unit">%</span>
											</div>
										</div>
										<div class="yibItem">
											<div class="yibtit">CO2浓度</div>
											<div class="lcCon">
												{{weatherInfo.co2}}
												<span class="unit">ppm</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div style="width: 49.2%;">
								<div class="titleComm">
									<span>视频监控</span>
								</div>
								<div class="commbg">
									<img src="/screen/assets/images/colorful/chong.png" alt="" class="jianvideo" />
								</div>
							</div>
						</div>
					</div>
					<!-- 右侧的内容 -->
					<div class="rightContent">
						<div class="leftItem">
							<div class="titleComm">
								<span>待办农事</span><span class="subtitle">{{growthInfo.currentWeek}}周/{{growthInfo.growthWeeks}}周</span>
							</div>
							<div class="daiban commbg">
								<div class="tabheader">
									<div style="width: 40%;">时间</div>
									<div style="width: 20%;">类型</div>
									<div style="width: 20%;">农事任务</div>
									<div style="width: 20%;">状态</div>
								</div>
								<div class="scrolling-container" style="height: calc(100% - 36px);">
									<div class="scrolling-list">
										<div class="daibanlist" v-for="(item,index) in taskData" :key="index">
											<div class="daibanitem">
												<div style="width: 40%;" class="con">{{item.operated_at}}</div>
												<div style="width: 20%;" class="con">{{item.type_name}}</div>
												<div style="width: 20%;" class="con">{{item.name}}</div>
												<div style="width: 20%;" class="con conb">{{item.status == 1 ? '执行中' : ''}}</div>
											</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="daibanlist" v-for="(item,index) in taskData" :key="index">
											<div class="daibanitem">
												<div style="width: 40%;" class="con">{{item.operated_at}}</div>
												<div style="width: 20%;" class="con">{{item.type_name}}</div>
												<div style="width: 20%;" class="con">{{item.name}}</div>
												<div style="width: 20%;" class="con conb">{{item.status == 1 ? '执行中' : ''}}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem" style="margin: 1.4vh 0;">
							<div class="titleComm">
								<span>预警信息</span>
								<span class="subtitle">历史记录<img src="/screen/assets/images/right.png" alt="" class="rightjiantou"></span>
							</div>
							<div class="alert commbg">
								<div class="scrolling-container">
									<div class="scrolling-list">
										<div class="scorllitem" v-for="(item,index) in alertData" :key="index">
											<div class="flex_l">
												<img src="/screen/assets/images/alert.png" alt="" class="alertimg" />
												{{item.alertTypeName}}
											</div>
											<div class="time">{{item.alertTime}}</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="scorllitem" v-for="(item,index) in alertData" :key="index">
											<div class="flex_l">
												<img src="/screen/assets/images/alert.png" alt="" class="alertimg" />
												{{item.alertTypeName}}
											</div>
											<div class="time">{{item.alertTime}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem">
							<div class="titleComm">
								<span>设备总览</span>
								<span class="subtitle">物联控制<img src="/screen/assets/images/right.png" alt="" class="rightjiantou"></span>
							</div>
							<div class="overivew commbg">
								<div class="overivewwrapper">
									<div class="overivewitem">
										<div class="overivewnum">{{devecidetotel.total}}</div>
										<div>设备总数</div>
									</div>
									<div class="overivewitem">
										<div class="overivewnum" style="color: #45EFFF;">{{devecidetotel.onlineCnt}}</div>
										<div>正常</div>
									</div>
									<div class="overivewitem">
										<div class="overivewnum" style="color: #FFEC7B;">{{devecidetotel.offlineCnt}}</div>
										<div>异常</div>
									</div>
									<div class="overivewitem">
										<div class="overivewnum" style="color: #FF6262;">{{devecidetotel.alertCnt}}</div>
										<div>数据告警</div>
									</div>
								</div>
								<div class="scrolling-container" style="height: calc(100% - 60px);margin-top: 10px;">
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in devecideList" :key="index">
											<div class="flex_l">
												<img src="/screen/assets/images/alert.png" alt="" class="daibanimg" />
												{{item.name}}
											</div>
											<div class="status">
												<img v-if="item.status == 'offline'" src="/screen/assets/images/error.png" alt="" class="daibanimg" />
												<img v-esel src="/screen/assets/images/dui.png" alt="" class="statusimg" />
												<!-- 状态：active-启用中，online-在线，offline-离线 -->
												{{item.status == 'active' ? '设备运行中' : item.status == 'online' ? '设备在线' : 'offline'}}
											</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in devecideList" :key="index">
											<div class="flex_l">
												<img src="/screen/assets/images/alert.png" alt="" class="daibanimg" />
												{{item.name}}
											</div>
											<div class="status">
												<img v-if="item.status == 'offline'" src="/screen/assets/images/error.png" alt="" class="daibanimg" />
												<img v-esel src="/screen/assets/images/dui.png" alt="" class="statusimg" />
												<!-- 状态：active-启用中，online-在线，offline-离线 -->
												{{item.status == 'active' ? '设备运行中' : item.status == 'online' ? '设备在线' : 'offline'}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="app"></div>
		<script type="module">
			const { createApp, ref, onMounted, nextTick} = Vue;
			let baseUrl = 'https://sxadmin.sxgkx.cn/STleXfFAvV.php/screen/'
			let gid = null //大棚id
			let currentUrl = window.location.href; 
			let queryString = currentUrl.split('?')[1]; 
			if (queryString) {
				let params = new URLSearchParams(queryString); 
				gid = params.get('gid');
			}
			createApp({
				setup() {
					const baseInfo = ref({}) //大棚信息
					const weatherInfo = ref({}) //实况天气
					const weatherNow = ref({}) //今日天气
					const taskData = ref([]) //待办农事
					const alertData = ref([]) //警告列表
					const devecidetotel = ref({}) //设备统计
					const devecideList = ref({}) //设备列表
					const growthInfo = ref({}) //生长信息
					const recordsData = ref([]) //生长周期信息
					const hoursMin = ref('00:00');
					const yearMonth = ref('');
					let timer;
					onMounted(() => {
						$.ajax({
							url: baseUrl + 'base/greenhouseDetail',
							type: 'GET',
							data:{gid},
							timeout: 15000,
							success: function(data) {
								baseInfo.value = data.data
							},
						})
						// 大棚传感器信息
						$.ajax({
							url: baseUrl + 'base/greenhouseSensorInfo',
							type: 'GET',
							data:{gid},
							timeout: 15000,
							success: function(data) {
								weatherInfo.value = data.data
							},
						})
						// 今日天气
						$.ajax({
							url: baseUrl + 'weather/today',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								weatherNow.value = data.data
							},
						})
						// 待办农事
						$.ajax({
							url: baseUrl + 'base/taskLists',
							type: 'GET',
							data:{gid,status:1},
							timeout: 15000,
							success: function(data) {
								// console.log(data)
								taskData.value = data.data.list
							},
						})
						// 警告列表
						$.ajax({
							url: baseUrl + 'base/alertLists',
							type: 'GET',
							data:{gid},
							timeout: 15000,
							success: function(data) {
								// console.log(data)
								alertData.value = data.data.list
							},
						})
						// 设备统计
						$.ajax({
							url: baseUrl + 'base/currentDeviceStats',
							type: 'GET',
							data:{gid},
							timeout: 15000,
							success: function(data) {
								devecidetotel.value = data.data
							},
						})
						// 设备列表
						$.ajax({
							url: baseUrl + 'base/deviceLists',
							type: 'GET',
							data:{gid},
							timeout: 15000,
							success: function(data) {
								console.log(data)
								devecideList.value = data.data.list
							},
						})
						// 生长周期
						$.ajax({
							url: baseUrl + 'base/growthRecord',
							type: 'GET',
							data:{gid:gid},
							timeout: 15000,
							success: function(data) {
								growthInfo.value = {
									currentDay: data.data.currentDay,
									currentWeek: data.data.currentWeek,
									growthWeeks: data.data.growthWeeks,
									num:Number(data.data.growthDays)
								}
								console.log(data.data.records,'console.log(data.data.growthDays)')
								recordsData.value = data.data.records.reverse()
								growthInfo.value.growthDays = []
								for(var i=Number(data.data.growthDays); i>0; i--){
									growthInfo.value.growthDays.push(i)
								}
								recordsData.value.forEach((item,index)=>{
									if(index+1==recordsData.value.length){
										item.lineflag = '2'
									} else {
										console.log(index)
										item.lineflag = '1'
										item.linenum = recordsData.value[index+1].growth_day - recordsData.value[index].growth_day - 1
									}
								})
							},
						})
						const nowTod = new Date();
						yearMonth.value = nowTod.getFullYear() + '/' + (nowTod.getMonth() + 1) + '/' +nowTod.getDate() +'日'
						updateTime();
						timer = setInterval(updateTime, 1000);
					});
					const gocoloful = (item) =>{
						window.location.href='./colorfulModel.html?gid='+gid
					}
					const goback = () =>{
						window.location.href='./regulatory.html'
					}
					const updateTime = () => {
					  const now = new Date();
					  hoursMin.value = formatTimeUnit(now.getHours()) + ':' + formatTimeUnit(now.getMinutes())
					};
					
					const formatTimeUnit = (unit) => {
					  return unit < 10 ? '0' + unit : unit.toString();
					};
					return {
						baseInfo,
						weatherInfo,
						weatherNow,
						taskData,
						alertData,
						devecidetotel,
						devecideList,
						hoursMin,
						yearMonth,
						growthInfo,
						recordsData,
						goback,
						gocoloful
					};
				}
			}).use(ElementPlus).mount('#industryResources');
		</script>
	</body>

</html>